<template>
    <div class="box">
      <detail-swiper></detail-swiper>
<!--
      <div class="videobox" v-show="info.video">
        <video :src="info.video" controls></video>
      </div>
-->
      <div v-show="info.resource">
            <img :src="info.head_pic">
      </div>
      <div class="con">
        <div class="item">
          <div class="info">

                <section class="_135editor" data-tools="135编辑器" data-id="93799" data-i="15609332104591" >
                    <section style="text-align: center;" data-i="15609332104592" class="">
                        <section style="display: inline-block;" data-i="15609332104593">
                            <section data-i="15609332104594" style="background-image: url(&quot;https://mpt.135editor.com/mmbiz_png/zZdMCXNJINCoABico9t4emWBBWugMiajUUZZ3fJl8PqrK2s5ZGXHb3MwdELJSrdlALicgcDQIuHckJl9Dia1ZrDaQQ/640?wx_fmt=png&quot;);background-repeat: no-repeat;background-attachment: initial;background-origin: initial;background-clip: initial;background-size: 100%;background-position: center center;">
                                <section class="135brush" data-brushtype="text" style="padding: 30px 25px 34px;color: #648de0;letter-spacing: 1.5px;font-size: 15px;box-sizing: border-box;" data-i="15609332104595">
                                    <strong><span style="font-size: 16px;">Part One: 课程讲解</span></strong>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
                    <div v-if="info.resource!=null&&info.resource!=''"><audio :src="info.resource" controls></audio></div>
                    <div v-if="info.video!=null&&info.video!=''"><video :src="info.video" poster="https://meilizi.oss-cn-shanghai.aliyuncs.com/%E8%A7%86%E9%A2%91%E5%B0%81%E9%9D%A2.JPG"  preload="auto" id="video" x5-playsinline="true" playsinline="" webkit-playsinline="" controls="controls"></video></div>
            
            <section class="_135editor" data-tools="135编辑器" data-id="93799" data-i="15609332104613" >
                    <section style="text-align: center;" data-i="15609332104614" class="">
                        <section style="display: inline-block;" data-i="15609332104615">
                            <section data-i="15609332104616" style="background-image: url(&quot;https://mpt.135editor.com/mmbiz_png/zZdMCXNJINCoABico9t4emWBBWugMiajUUZZ3fJl8PqrK2s5ZGXHb3MwdELJSrdlALicgcDQIuHckJl9Dia1ZrDaQQ/640?wx_fmt=png&quot;);background-repeat: no-repeat;background-attachment: initial;background-origin: initial;background-clip: initial;background-size: 100%;background-position: center center;">
                                <section class="135brush" data-brushtype="text" style="padding: 30px 25px 34px;color: #648de0;letter-spacing: 1.5px;font-size: 15px;box-sizing: border-box;" data-i="15609332104617">
                                    <strong><span style="font-size: 16px;">Part Two: 课程内容</span></strong>
                                </section>
                            </section>
                        </section>
                    </section>
                </section>
               <div class="item">
                    <div class="sub-tit">
                        <span>1</span>
                        <i>场景对话</i>
                    </div>
                    
                <div class="audio">
                <div v-if="info.ContentA1!=null&&info.ContentA1!=''"><audio :src="info.ContentA1" controls></audio></div>
                </div>
                    <div class="container1">    
                        <div v-html='info.Content1'></div>
                    </div>
                </div>
                <div class="item">
                    <div class="sub-tit">
                        <span>2</span>
                        <i>短语句式</i>
                    </div>
 
                    <div class="container2">
                       <div v-html='info.Content2'></div>
                    </div>
                </div>
             <div class="item">
                    <div class="sub-tit">
                        <span>3</span>
                        <i>词汇</i>
                    </div>
                     <div class="audio">
            <div v-if="info.ContentA3!=null&&info.ContentA3!=''"><audio :src="info.ContentA3" controls></audio></div>
                </div>
                    <div class="container3">
                        <div v-html='info.Content3'></div>
                    </div>
                </div>
                <div class="item">
                    <div class="sub-tit">
                        <span>4</span>
                        <i>语法重点</i>
                    </div>
                    <div class="container2">

                        <div v-html='info.Content4'></div>
                    </div>
                </div>
            <div class="sub-tit">
                        <span>5</span>
                        <i>举一反三</i>
                    </div>
                <div class="audio">
                    <div v-if="info.ContentA5!=null&&info.ContentA5!=''"><audio :src="info.ContentA5" controls></audio></div>
                </div>

            <div class="container3">

                <div v-html='info.Content5'></div>
            </div>

       <div class="sub-tit">
                        <span>6</span>
                        <i>应用扩展</i>
                    </div>
         <div class="audio">
                    <div v-if="info.ContentA6!=null&&info.ContentA6!=''"><audio :src="info.ContentA6" controls></audio></div>
                </div>
<br/><br/>


                      <section class="_135editor" data-tools="135编辑器" data-id="93708" data-i="15608253818857" style="box-sizing: border-box;" >
                    <section data-i="15608253818863" style="box-sizing: border-box;">
                        <section data-i="15608253818864" class="" style="margin-top: 5px;margin-bottom: 10px;text-align: center;box-sizing: border-box;">
                            <section data-width="95%" data-i="15608253818865" class="" style="padding: 10px 10px 15px;display: inline-block;width: 95%;vertical-align: top;box-shadow: #b9b9b9 1.41421px 1.41421px 6px;box-sizing: border-box;">
                                <section data-i="15608253818866" style="box-sizing: border-box;">
                                    <section data-i="15608253818867" style="margin-top: -30px;box-sizing: border-box;">
                                        <section data-width="50%" data-i="15608253818868" style="display: inline-block;vertical-align: top;width: 50%;box-sizing: border-box;">
                                            <section data-i="15608253818869" class="" style="box-sizing: border-box;">
                                                <section data-width="95%" data-i="15608253818870" class="" style="max-width: 100%;vertical-align: middle;display: inline-block;box-shadow: #000000 0px 0px 0px;width: 95%;box-sizing: border-box;overflow: hidden !important;">
                                                    <img class="" data-ratio="0.2196078431372549" src="https://mpt.135editor.com/mmbiz_png/zZdMCXNJINCoABico9t4emWBBWugMiajUUFKArtvNbIoBGO7BibM53vszGP17z060TMW7lHOGPcthp2eg0hR0Sjxw/640?wx_fmt=png" data-type="png" data-w="255" data-width="100%" style="vertical-align: middle;box-sizing: border-box;width: 100%;"/>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                                                </section>
                                            </section>
                                        </section>

                                    </section>
                                </section>
                                <section data-i="15608253818887" style="box-sizing: border-box;">
                                    <section data-i="15608253818888" style="margin-top: 8px;margin-bottom: 18px;box-sizing: border-box;">
                                        <section data-i="15608253818889" class="" style="border-top: 1px dashed #b9b9b9;box-sizing: border-box;"></section>
                                    </section>
                                </section>

                                            <div class="container2" style="text-align: left">

                                                <div v-html='info.Content6'></div>
                                            </div>
                         

                            </section>
                        </section>
                    </section>
                </section>                

                                         
        <section class="_135editor" data-tools="135编辑器" data-id="93799" data-i="15609332104639" >
            <section style="text-align: center;" data-i="15609332104640" class="">
                <section style="display: inline-block;" data-i="15609332104641">
                    <section data-i="15609332104642" style="background-image: url(&quot;https://mpt.135editor.com/mmbiz_png/zZdMCXNJINCoABico9t4emWBBWugMiajUUZZ3fJl8PqrK2s5ZGXHb3MwdELJSrdlALicgcDQIuHckJl9Dia1ZrDaQQ/640?wx_fmt=png&quot;);background-repeat: no-repeat;background-attachment: initial;background-origin: initial;background-clip: initial;background-size: 100%;background-position: center center;">
                        <section class="135brush" data-brushtype="text" style="padding: 30px 25px 34px;color: #648de0;letter-spacing: 1.5px;font-size: 15px;box-sizing: border-box;" data-i="15609332104643">
                            <section style="display: inline-block;" data-i="15609332104615">
                                <strong><span style="font-size: 16px;">Part Three: 课程预告</span></strong>
                            </section>
                        </section>
                    </section>
                </section>
            </section>
        </section>
        <p style="text-align: center;" data-i="15609289276310">
            <span style="color: #ffffff;background-color: #ff4f79;" data-i="15609289276311"><strong data-i="15609289276312"><span style="max-width: 100%;font-size: 14px;letter-spacing: 0.544px;-webkit-max-logical-width: 100%;caret-color: #FF0000;font-family: Arial;box-sizing: border-box !important;word-wrap: break-word !important;outline: none 0px !important;" data-i="15609289276313"></span></strong><span style="max-width: 100%;font-size: 14px;letter-spacing: 0.544px;-webkit-max-logical-width: 100%;caret-color: #FF0000;font-family: Arial;box-sizing: border-box !important;word-wrap: break-word !important;outline: none 0px !important;" data-i="15609289276313"></span><strong data-i="15609289276312"><span style="max-width: 100%;font-size: 14px;letter-spacing: 0.544px;-webkit-max-logical-width: 100%;caret-color: #FF0000;font-family: Arial;box-sizing: border-box !important;word-wrap: break-word !important;outline: none 0px !important;" data-i="15609289276313"><div v-html='info.tip'></div></span></strong></span>
        </p>

    <div class="video">
<div v-if="info.tip_video!=null&&info.tip_video!=''"><video :src="info.tip_video" poster="https://meilizi.oss-cn-shanghai.aliyuncs.com/%E8%A7%86%E9%A2%91%E5%B0%81%E9%9D%A2.JPG"  preload="auto" id="video" x5-playsinline="true" playsinline="" webkit-playsinline="" controls="controls"></video></div>           
        </div>

            <section powered-by="135编辑器" style="max-width: 100%;box-sizing: border-box;text-align: center;word-wrap: break-word !important;" data-i="15609289276333">
               <!-- <section style="max-width: 100%;box-sizing: border-box;vertical-align: middle;display: inline-block;line-height: 0;width: 205.047px;box-shadow: #7f4125 0px 0px 15px;border-width: 0px;border-radius: 8px;border-style: none;border-color: #3e3e3e;overflow: hidden;word-wrap: break-word !important;" data-i="15609289276334">-->
                    <img class="" data-copyright="0" data-cropselx1="0" data-cropselx2="205" data-cropsely1="0" data-cropsely2="205" data-ratio="1" src="../../static/images/WechatIMG58.jpeg" data-type="png" data-w="300" style="box-sizing: border-box;vertical-align: middle;word-wrap: break-word !important;width: 100% !important;visibility: visible !important;" width="100%"/>
                    <!--<img class="" data-copyright="0" data-cropselx1="0" data-cropselx2="205" data-cropsely1="0" data-cropsely2="205" data-ratio="1" src="https://mpt.135editor.com/mmbiz_png/zZdMCXNJINCoABico9t4emWBBWugMiajUUiaey0HqNLfP08HAVI1dKyjNJZcvTBOLkmfeJnsMwLZFiaZZic0K4XWEicg/640?wx_fmt=png" data-type="png" data-w="167" style="box-sizing: border-box;vertical-align: middle;word-wrap: break-word !important;width: 205px !important;visibility: visible !important;" width="205px"/>
                </section>-->
            </section>
          <!-- <section powered-by="135编辑器" style="margin-top: -20px;max-width: 100%;box-sizing: border-box;text-align: left;word-wrap: break-word !important;transform: translate3d(20px, 0px, 0px);-webkit-transform: translate3d(20px, 0px, 0px);-moz-transform: translate3d(20px, 0px, 0px);-ms-transform: translate3d(20px, 0px, 0px);-o-transform: translate3d(20px, 0px, 0px);" data-i="15609289276336">
                <section style="max-width: 100%;box-sizing: border-box;vertical-align: middle;display: inline-block;line-height: 0;width: 51.25px;word-wrap: break-word !important;" data-i="15609289276337">
                    <img class="__bg_gif" data-ratio="1.6866667" src="https://mpt.135editor.com/mmbiz_gif/zZdMCXNJINCoABico9t4emWBBWugMiajUUCUY8U7cqdWrvHKH25hgPfia4HgHJib8E3nehTyTwd9B4gYBltCqkTAzg/640?wx_fmt=gif" data-type="gif" data-w="300" style="box-sizing: border-box;vertical-align: middle;word-wrap: break-word !important;width: 51.25px !important;visibility: visible !important;" width="51.25px"/>
                </section>
            </section>
            <section powered-by="135编辑器" style="margin-bottom: 10px;max-width: 100%;box-sizing: border-box;text-align: center;word-wrap: break-word !important;" data-i="15609289276339">
                <section style="max-width: 100%;box-sizing: border-box;color: #ff234c;letter-spacing: 1px;word-wrap: break-word !important;" data-i="15609289276340">
                    <p style="max-width: 100%;box-sizing: border-box;min-height: 1em;word-wrap: break-word !important;" data-i="15609289276341">
                        <img class="__bg_gif" data-ratio="1.6866667" src="../../static/WechatIMG1.gif" data-type="gif" data-w="300" style="box-sizing: border-box;vertical-align: middle;word-wrap: break-word !important;max-width: 300px !important;visibility: visible !important;" width="51.25px"/>
                        <!--<strong style="max-width: 100%;box-sizing: border-box;word-wrap: break-word !important;" data-i="15609289276342">关注一下再走呗～</strong>-->
                    </p>
                </section>
            </section>
        </section>
<!--
            <div class="sm">
              <img v-for="(v,k) in info.images" :key="k" :src="v">
            </div>
-->
          </div>
        </div>
        <!--<div class="item">
          <div class="title">
            <h3>名师简介</h3>
          </div>
          <div class="teacher">
            <img :src="teacher.img" alt="">
            <div>
              <h3>{{teacher.name}}</h3>
              <p>{{teacher.des}}</p>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">
            <h3>课程目录</h3>
          </div>
          <div>
            <p v-for="(item,index) in catalog" :key="index" class="citem">{{item.name}}</p>
          </div>
        </div>-->
<!--        <div>-->
<!--          <img src="../../static/images/pic01.png" alt="">-->
<!--          <img src="../../static/images/pic02.png" alt="">-->
<!--          <img src="../../static/images/pic03.png" alt="">-->
<!--          <img src="../../static/images/pic04.png" alt="">-->
<!--        </div>-->
      </div>
      <div class="fixbox" v-if="!isMine">
        <h3>总计：￥{{info.price?info.price/100:0}}</h3>
        <div class="buybox">
          <a @click="$router.push({path:'/order',query:{'id':info.id,'type':1}})">立即购买</a>
        </div>
       <!-- <div class="sharebox" @click="wxShareAppMessage">
          <svg x="0px" y="0px" width="30px" height="30px" viewBox="0 0 1024 1024" enable-background="new 0 0 26 26" xml:space="preserve"> <path fill="#666" d="M836.061867 743.8016c-75.400533 0-136.533333-61.149867-136.533333-136.533333 0-13.090133 1.9456-25.719467 5.376-37.700267l-398.8992-167.304533c-23.6032 40.891733-67.669333 68.471467-118.237867 68.471467-75.383467 0-136.533333-61.149867-136.533333-136.618667 0-75.656533 61.149867-136.789333 136.533333-136.789333 39.492267 0 75.008 16.878933 99.925333 43.7248l257.109333-184.849067c-10.001067-19.012267-15.7184-40.6528-15.7184-63.6416 0-75.4176 60.893867-136.5504 136.277333-136.5504s136.533333 61.1328 136.533333 136.5504c0 75.383467-61.149867 136.516267-136.533333 136.516267-40.106667 0-76.066133-17.425067-100.9664-44.9536l-256.682667 184.541867c10.564267 19.421867 16.571733 41.728 16.571733 65.450667 0 12.7488-1.860267 25.002667-5.102933 36.6592l399.2064 167.441067c23.722667-40.328533 67.464533-67.498667 117.6576-67.498667 75.400533 0 136.533333 61.1328 136.533333 136.5504C972.5952 682.651733 911.4624 743.8016 836.061867 743.8016zM665.3952 94.926933c56.4736 0 102.4-45.9264 102.4-102.382933 0-56.4736-45.9264-102.417067-102.4-102.417067s-102.314667 45.943467-102.314667 102.417067C563.080533 49.000533 608.938667 94.926933 665.3952 94.926933zM187.784533 231.460267c-56.4736 0-102.4 45.9264-102.4 102.656 0 56.541867 45.9264 102.485333 102.4 102.485333s102.4-45.9264 102.4-102.485333C290.184533 277.403733 244.258133 231.460267 187.784533 231.460267zM836.061867 504.8512c-56.4736 0-102.4 45.943467-102.4 102.417067s45.9264 102.4 102.4 102.4 102.4-45.9264 102.4-102.4S892.535467 504.8512 836.061867 504.8512z" transform="translate(0, 812) scale(1, -1)"></path> </svg>
        </div>-->
      </div>
    </div>
</template>

<script>
import DetailSwiper from './swiper'
import * as info from '../api/info'
import wxConfig from '../api/wx'
export default {
  name: 'course-detail',
  components: {
    'detail-swiper': DetailSwiper
  },
  data () {
    return {
      isMine: false,
      info: {},
      id: '',
      teacher: {},
      catalog: {},
      wc: ''
    }
  },
  mounted () {
    console.log(this.$route.query.id)
    this.id = this.$route.query.id
    if (this.$route.query.isMine) {
      this.isMine = this.$route.query.isMine
    }
    this.getCatalog(this.id)
  },
  methods: {
    wxRegister () {
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },
    wxShareTimeline () {
      let that = this
      // 微信自定义分享到朋友圈
      let option = {
        title: that.info.name, // 分享标题, 请自行替换
        link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
        imgUrl: that.info.cover, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          // alert('分享成功')
        },
        error: () => {
          // alert('已取消分享')
        }
      }
      console.log(option)
      // 将配置注入通用方法
      wxConfig.ShareTimeline(option)
    },
    wxShareAppMessage () {
      let that = this
      // 微信自定义分享给朋友
      let option = {
        title: that.info.name, // 分享标题, 请自行替换
        link: window.location.href.split('#')[0], // 分享链接，根据自身项目决定是否需要split
        imgUrl: that.info.cover, // 分享图标, 请自行替换，需要绝对路径
        desc: that.info.intro, // 分享描述, 请自行替换
        success: () => {
          // alert('分享成功')
        },
        error: () => {
          // alert('已取消分享')
        }
      }
      console.log(option)
      // 将配置注入通用方法
      wxConfig.ShareAppMessage(option)
    },
    getCourse (id) {
      info.getCourse(id).then(res => {
        this.info = res.data
        this.getTeacher(res.data.teacher_id)
        this.getCourseCatalog(res.data.cate_id)

        wxConfig.wxRegister(this.wxRegister())
      })
    },
    getTeacher (teacherId) {
      info.getTeacher(teacherId).then(res => {
        this.teacher = res.data
      })
    },
    getCourseCatalog(id){
      info.getCourseCatalog(id).then(res=>{
        this.catalog = res.data
      })
    },
    getCatalog(id){
      info.getCatalog(id).then(res=>{
        if(res.data.is_free == 1){
          this.isMine = true
          res.data.images = res.data.content.split(',')
        }
        this.info = res.data
        console.log(this.info)

      })
    }
  }
}
</script>

<style scoped>
.con{
  padding-bottom: 1.5rem;
}
.title{
  height: .9rem;
  line-height: .9rem;
  background: #f5f5f5;
  padding: 0 .3rem;
}
.title h3{
  font-size: .44rem;
  color: #555;
  position: relative;
  padding-left: .3rem;
}
.title h3:before{
  content: '';
  position: absolute;
  top: 15%;
  left: 0;
  border-left: 2px solid #ddd;
  height: 70%;
}
.teacher{
  padding: .4rem .3rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.teacher img{
  display: block;
  width: 2.2rem;
  margin-right: .3rem;
}
.teacher div{
  flex-grow: 1;
}
.teacher div h3{
  font-size: .44rem;
  color: #555;
  margin-bottom: .3rem;
}
.teacher div p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: .4rem;
}
.info{
  padding: .4rem .3rem;
}
.info .price{
  font-size: .36rem;
}
.info .price span{
  font-size: .48rem;
  color: #f00;
}
.sm{
  margin-top: .3rem;
  margin-bottom: .3rem;
}
.sm div{
  margin-bottom: .3rem;
}
.sm h3{
  font-size: .38rem;
  color: #333;
}
.sm h3 span{
  color: blue;
}
.sm p{
  margin-top: .14rem;
  line-height: .58rem;
  font-size: .36rem;
}
.sm h2{
  margin-top: .4rem;
  text-align: center;
  font-size: .4rem;
  color: #333;
  margin-bottom: .2rem;
  font-weight: bold;
}
.fixbox{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.2rem;
  background: #f5f5f5;
  line-height: 1.2rem;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fixbox h3{
  font-size: .4rem;
  padding-right: .5rem;
}
.buybox{
  width: 3rem;
  text-align: center;
  font-size: .5rem;
  display: inline-block;
  background: #0959c8;
  color: #fff;
}
.buybox a{
  display: block;
  color: #fff;
}
.sharebox{
  float: right;
  line-height: 1.2rem;
}
.sharebox svg{
  margin-top: .2rem;
  margin-right: .3rem;
}
.citem{
  height: 1rem;
  line-height: 1rem;
  border-bottom: 1px solid #ddd;
  padding: 0 .3rem;
  color: #333;
  font-size: .4rem;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sub-tit{
    display: flex;
    display: -webkit-flex;
    height: 1.5rem;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: .38rem;
    align-items: center;
}
.sub-tit span{
    width: .7rem;
    height: .7rem;
    line-height: .7rem;
    color: #fff;
    text-align: center;
    background: #1E9BE8;
}
.sub-tit i{
    height: .7rem;
    line-height: .7rem;
    padding: 0 .3rem;
    color: #000;
    background: #7BC4F1;
}
.container1{
    padding: .3rem;
    border: 1px dashed #fde458;
    background: #FFFDF2;
    font-size: .42rem;
    line-height: .7rem;
    color: #222;
}
.container2{
    font-size: .42rem;
    line-height: .7rem;
    color: #222;
}
.container3{
    box-shadow: 0 0 5px #e1e1e1;
    padding: .3rem;
}
.container3 p{
    position: relative;
    padding-left: .4rem;
    font-size: .42rem;
    line-height: .7rem;
    color: #1E9BE8;
}
.container3 p::before{
    content: '';
    left: 0;
    top: 50%;
    margin-top: -3px;
    position: absolute;
    width: 6px;
    height: 6px;
    background: #333;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.container4{
    border-top: 2px dashed #c1c1c1;
    border-bottom: 2px dashed #c1c1c1;
    padding: .2rem ;
    font-size: .42rem;
    line-height: .7rem;
    color: #000;
}
.container4 span{
    text-shadow: #ff0000 2px 2px 10px;
}
</style>